<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		navigateToMemorialHall,
	} from "@/assets/scripts/navigate.js"
	const props = defineProps(['data'])
	// console.log(props.data.src);

	const lunarDate = ref(false)
	const calendarRef = ref()
	const lunar = ref({
		Animal: '',
		IDayCn: '',
		IMonthCn: '',
		Term: '',
		astro: '',
		cDay: '',
		cMonth: '',
		cYear: '',
		gzDay: '',
		gzMonth: '',
		gzYear: '',
		isLeap: '',
		isTerm: '',
		isToday: '',
		lDay: '',
		lMonth: '',
		lYear: '',
		nWeek: '',
		ncWeek: '',
		sWeek: '',
	})

	const remainingTime = (timeString, isLunar = false) => {

		if (!timeString) {
			return ''
		}

		// 将时间字符串转换为日期对象
		let targetDate = new Date(timeString.replace(/-/g, '/'));

		// 获取当前时间
		let currentDate = new Date();
		if (isLunar) {
			currentDate = new Date(`${lunar.value.lYear}-${lunar.value.lMonth}-${lunar.value.lDay}`)
		}

		// 计算剩余时间（单位：毫秒）
		let remainingTime = currentDate.getTime() - targetDate.getTime();

		// 如果目标时间已经过去，则返回负数
		if (remainingTime < 0) {
			return "在世";
		}

		// 将剩余时间转换为天、小时、分钟和秒
		let days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
		let hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		let minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));

		// 构建剩余时间的字符串表示
		let remainingTimeString = "";
		if (days > 0) {
			remainingTimeString += days + "天 ";
		}
		if (hours > 0) {
			remainingTimeString += hours + "小时 ";
		}

		return remainingTimeString;
	}

	onMounted(() => {
		// console.log(calendarRef.value.calendar.lunar);
		lunar.value = calendarRef.value.calendar.lunar
		lunarDate.value = true
	})
</script>

<template>
	<view class="item p-normal">
		<gwbq-calendar v-show="false" ref="calendarRef" :insert="true" :lunar="true" />
		<view class="tag">
			<span class="single" v-if="props.data.mmType==='mm_type_one'">单人组</span>
			<span class="double" v-else>双人组</span>
		</view>
		<view class="box">

			<swiper class="swiper" circular :indicatorDots="false" autoplay>
				<swiper-item>
					<view class="d-flex">
						<view class="p-small mr-normal avatar">
							<image :src="props.data.mmImg1" mode="scaleToFill" class="image image-fill"></image>
						</view>
						<view class="d-flex-dx1">
							<view class="d-flex">
								<view class="mr-small name">{{props.data.mmName1}}</view>
							</view>
							<view class="d-flex d-flex-aic mt-normal date">
								<view class="mr-small">
									生卒:
								</view>
								<view class="mr-small">
									<span class="lunar" v-if="props.data.mmDate1==='time_type_private'">农</span>
									<span class="gregorian" v-else>公</span>
								</view>
								<view>
									<span>{{props.data.mmBorn1}}</span>
									<span>至</span>
									<span>{{props.data.mmPassAwayDate1}}</span>
								</view>
							</view>
							<view class="d-flex d-flex-aic mt-normal so-far">
								<view class="mr-small">
									离世:
								</view>
								<view v-if="lunarDate">
									{{remainingTime(props.data.mmPassAwayDate1, props.data.mmDate1==='time_type_private')}}
								</view>
							</view>
							<view class="d-flex d-flex-aic mt-normal statistics">
								<view class="d-flex d-flex-aic">
									<uni-icons type="fire-filled" size="16" color="#999"></uni-icons>
									<view class="ml-small num">{{props.data.memorialValue}}</view>
								</view>
								<view class="mx-normal divider"></view>
								<view class="d-flex d-flex-aic">
									<uni-icons type="eye-filled" size="16" color="#999"></uni-icons>
									<view class="ml-small num">{{props.data.mmNum}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item v-if="props.data.mmType==='mm_type_two'">
					<view class="d-flex">
						<view class="p-small mr-normal avatar">
							<image :src="props.data.mmImg2" mode="scaleToFill" class="image image-fill"></image>
						</view>
						<view class="d-flex-dx1">
							<view class="d-flex">
								<view class="mr-small name">{{props.data.mmName2}}</view>
							</view>
							<view class="d-flex d-flex-aic mt-normal date">
								<view class="mr-small">
									生卒:
								</view>
								<view class="mr-small">
									<span class="lunar" v-if="props.data.mmDate2==='time_type_private'">农</span>
									<span class="gregorian" v-else>公</span>
								</view>
								<view>
									<span>{{props.data.mmBorn2}}</span>
									<span>至</span>
									<span>{{props.data.mmPassAwayDate2}}</span>
								</view>
							</view>
							<view class="d-flex d-flex-aic mt-normal so-far">
								<view class="mr-small">
									离世:
								</view>
								<view v-if="lunarDate">
									{{remainingTime(props.data.mmPassAwayDate2, props.data.mmDate2==='time_type_private')}}
								</view>
							</view>
							<view class="d-flex d-flex-aic mt-normal statistics">
								<view class="d-flex d-flex-aic">
									<uni-icons type="fire-filled" size="16" color="#999"></uni-icons>
									<view class="ml-small num">{{props.data.memorialValue}}</view>
								</view>
								<view class="mx-normal divider"></view>
								<view class="d-flex d-flex-aic">
									<uni-icons type="eye-filled" size="16" color="#999"></uni-icons>
									<view class="ml-small num">{{props.data.mmNum}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<uv-button text="去祭拜" @click="navigateToMemorialHall(props.data.id)" icon="home" class="btn" type="success"
				iconColor="#fff" :customStyle="{height:'28px',padding:'6px'}"></uv-button>
		</view>

	</view>
</template>

<style lang="scss" scoped>
	.item {
		background-color: #f5f5f5;
		position: relative;
		overflow: hidden;

		.tag {
			position: absolute;
			top: 0;
			left: 0;
			transform: rotateZ(-45deg) translateX(-25%);
			z-index: 1;
			width: 60px;
			height: 20px;
			font-size: 12px;
			color: #fff;

			.single {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #4a97fe;
			}

			.double {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fd3f4e;
			}
		}

		.box {
			position: relative;

			.swiper {
				height: 112px;
			}

			.btn {
				position: absolute;
				bottom: 0;
				right: 0;
			}
		}


		.avatar {
			background-color: #fff;
			border: 1px solid #000;
			width: 75px;
			height: 100px;
		}

		.name {
			font-size: 18px;
		}

		.date {
			font-size: 12px;

			.lunar,
			.gregorian {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: 1px solid #000;
				color: #fff;
				font-size: 12px;

				&.lunar {
					background-color: #cb8112;
				}

				&.gregorian {
					background-color: #4e6ef2;
				}
			}
		}

		.so-far,
		.statistics {
			color: #999999;
			font-size: 12px;

			.divider {
				width: 1px;
				height: 12px;
				background-color: #999999;
			}
		}
	}
</style>